<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="600px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">
            {{data.goods_info.name}}
            <el-switch
                @change="switchChange('is_show','goods_info')"
                v-model="data.goods_info.is_show"
                active-color="#26BD00"
                inactive-color="#c0c4cc"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
          </div>
          <MyTable
          :tableColumn="tableColumn"
          :tableData="data.goods_info.childs"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span class="btnCLass" v-if="scope.config.templateType=='SwitchBtn'">
                <el-switch
                  @change="switchChange(scope.config.prop,'goods_info')"
                  v-model="scope.row[scope.config.prop]"
                  active-color="#26BD00"
                  inactive-color="#c0c4cc"
                  :active-value='1'
                  :inactive-value='0'
                  >
                </el-switch>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">
            {{data.pickup_info.name}}
            <el-switch
                @change="switchChange('is_show','pickup_info')"
                v-model="data.pickup_info.is_show"
                active-color="#26BD00"
                inactive-color="#c0c4cc"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
          </div>
          <MyTable
          :tableColumn="tableColumn"
          :tableData="data.pickup_info.childs"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span class="btnCLass" v-if="scope.config.templateType=='SwitchBtn'">
                <el-switch
                  @change="switchChange(scope.config.prop,'pickup_info')"
                  v-model="scope.row[scope.config.prop]"
                  active-color="#26BD00"
                  inactive-color="#c0c4cc"
                  :active-value='1'
                  :inactive-value='0'
                  >
                </el-switch>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">
            {{data.recive_info.name}}
            <el-switch
                @change="switchChange('is_show','recive_info')"
                v-model="data.recive_info.is_show"
                active-color="#26BD00"
                inactive-color="#c0c4cc"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
          </div>
          <MyTable
          :tableColumn="tableColumn"
          :tableData="data.recive_info.childs"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span class="btnCLass" v-if="scope.config.templateType=='SwitchBtn'">
                <el-switch
                  @change="switchChange(scope.config.prop,'recive_info')"
                  v-model="scope.row[scope.config.prop]"
                  active-color="#26BD00"
                  inactive-color="#c0c4cc"
                  :active-value='1'
                  :inactive-value='0'
                  >
                </el-switch>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      data:{
        goods_info:{name:'',is_show:1},
        pickup_info:{name:'',is_show:1},
        recive_info:{name:'',is_show:1},
      },
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.entry_name'),
          prop: "name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.isShow'),
          prop: "is_show",
          width: 120,
          templateType:'SwitchBtn',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.isMandatory'),
          prop: "is_require",
          width: 120,
          templateType:'SwitchBtn',
        },
        
      ],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.Visible = true;
      this.lid=data.lid
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("getItemConfig", { lid: this.lid}).then((res) => {
        this.data = res.data;
      });
    },
    // 提交修改
    confirm() {
      let type=true
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("lid", this.lid);
        params.append("data", JSON.stringify(this.data));

        this.$postForm("saveItemConfig", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.data={
        goods_info:{name:'',is_show:1},
        pickup_info:{name:'',is_show:1},
        recive_info:{name:'',is_show:1},
      }
      this.Visible = false;
    },
    switchChange(prop,typeName){
      if(prop=='is_show'){
        let no_box_show=true
        this.data[typeName].childs.forEach(item => {
          if(item.is_show===1){
            no_box_show=false
          }
        });
        if(no_box_show){
          this.data[typeName].is_show=0
        }
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxTitle {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
</style>